<template>
  <div class="logic-flow-view">
    <!-- 辅助工具栏-上 -->
    <Control
      class="demo-control"
      v-if="lf"
      :lf="lf"
      @catData="catData"
    ></Control>

    <!-- 画布 -->
    <!-- <div class="container" ref="container"></div> -->
    <div id="LF-view" ref="container"></div>

    <!-- 节点面板-左 -->
    <NodePanel v-if="lf" :lf="lf" :nodeList="nodeList"></NodePanel>

    <!-- 属性面板-右 -->
    <!-- :modal="false" -->
    <el-drawer
      title="设置节点属性"
      v-model="dialogVisible"
      direction="rtl"
      size="500px"
      :before-close="closeDialog">
      <PropertyDialog
        v-if="dialogVisible"
        :nodeData="clickNode"
        :lf="lf"
        @setPropertiesFinish="closeDialog"
      ></PropertyDialog>
    </el-drawer>

    <el-dialog
      title="数据"
      v-model="dataVisible"
      width="50%"
      >
      <DataDialog :graphData="graphData"></DataDialog>
    </el-dialog>    
  </div>
</template>

<script setup name="LF">
import { onMounted, ref } from 'vue'

import LogicFlow from "@logicflow/core";
import { Menu, Snapshot, MiniMap } from '@logicflow/extension'
import "@logicflow/core/dist/style/index.css";
import '@logicflow/extension/lib/style/index.css'
import NodePanel from './LFComponents/NodePanel.vue'
import Control from './LFComponents/Control.vue'
import PropertyDialog from './PropertySetting/PropertyDialog.vue'
import DataDialog from './LFComponents/DataDialog.vue'
import { nodeList } from './config'


import {
  registerStart,
  registerUser,
  registerEnd,
  registerDownload,
  registerPolyline,
  registerTask,
} from './registerNode'

const demoData = import.meta.glob('./data.json')

const container = ref()

onMounted(()=>{
  initLF()
})

const config = {
  background: {
    backgroundColor: '#f7f9ff',
  },
  grid: {
    size: 10,
    visible: true
  },
  keyboard: {
    enabled: true
  },
  edgeTextDraggable: true,
  hoverOutline: false,
}

const lf = ref()

const initLF = () => {
  lf.value = new LogicFlow({
    container: container.value,
    ...config,
    plugins:[
      Menu,
      MiniMap,
      Snapshot
    ],
  })
  registerNode()
  render()
}

// 在节点面板上注册节点
const registerNode = () => {
  registerStart(lf.value)
  registerUser(lf.value)
  registerEnd(lf.value)
  registerDownload(lf.value)
  registerPolyline(lf.value)
  registerTask(lf.value)
}

// 渲染
const render = () => {
  lf.value.render(demoData)
  lfEvent()
}

const clickNode = ref()

const dialogVisible = ref(false)

const moveData = ref({})

const lfEvent = () => {
  lf.value.on('node:click', ({data}) => {
      console.log('node:click', data)
      clickNode.value = data
      dialogVisible.value = true
  })
  lf.value.on('edge:click', ({data}) => {
      console.log('edge:click', data)
      clickNode.value = data
      dialogVisible.value = true
  })
  lf.value.on('element:click', () => {
      
  })
  lf.value.on('edge:add', ({data}) => {
      console.log('edge:add', data)
  })
  lf.value.on('node:mousemove', ({data}) => {
      console.log('node:mousemove')
      moveData.value = data
  })
  lf.value.on('blank:click', () => {
      
  })
  lf.value.on('connection:not-allowed', (data) => {
    ElMessage({
      type: 'error',
      message: data.msg
    })
  })
  lf.value.on('node:mousemove', () => {
    console.log('on mousemove')
  })
}

//#region 查看数据弹窗
const dataVisible = ref(false)

const graphData = ref(null)

const catData = () => {
  graphData.value = lf.value.getGraphData();
  dataVisible.value = true;
}
//#endregion

const closeDialog = () => {
  dialogVisible.value = false
}

</script>

<style scoped>
.container {
  width: 2000px;
  height: 1500px;
}

.logic-flow-view {
  height: 100vh;
  position: relative;
}
.demo-title{
  text-align: center;
  margin: 20px;
}
.demo-control{
  position: absolute;
  top: 50px;
  right: 50px;
  z-index: 2;
}
#LF-view{
  width: calc(100% - 100px);
  height: 90%;
  outline: none;
  margin-left: 50px;
}
.time-plus{
  cursor: pointer;
}
.add-panel {
  position: absolute;
  z-index: 11;
  background-color: white;
  padding: 10px 5px;
}
.el-drawer__body {
  height: 80%;
  overflow: auto;
  margin-top: -30px;
  z-index: 3;
}

@keyframes lf_animate_dash {
  to {
    stroke-dashoffset: 0;
  }
}
</style>